<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-badge {
				margin-right: 5%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">离线设备</h1>
		</header>
		<div class="mui-content">

			<ul class="mui-table-view mui-table-view-chevron">

				<li class="mui-table-view-cell">总计：
					<span class="mui-badge mui-badge-primary total">0</span>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<span class="mui-badge  device1">0</span>
					<a class="mui-navigate-right" href="#">弹簧柜</a>
					<ul class="mui-table-view mui-table-view-chevron arr1"></ul>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<span class="mui-badge  device2">0</span>
					<a class="mui-navigate-right" href="#">RFID柜</a>
					<ul class="mui-table-view mui-table-view-chevron arr2"></ul>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<span class="mui-badge  device3">0</span>
					<a class="mui-navigate-right" href="#">重力柜</a>
					<ul class="mui-table-view mui-table-view-chevron arr3"></ul>
				</li>

			</ul>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()

			mui.plusReady(function() {
				//关闭等待框
				plus.nativeUI.closeWaiting();
				//显示当前页面
				mui.currentWebview.show();
				var deviceMsg = plus.webview.currentWebview().data;
				console.log(JSON.stringify(deviceMsg));
				var total = device1 = device2 = device3 = 0;
				var arr1 = arr2 = arr3 = [];
				deviceMsg.forEach(function(val, index) {
					//					console.log(JSON.stringify(val), index, this);
					
					var html = '<li class="mui-table-view-cell mui-transitioning"><div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-grey" style="transform: translate(0px, 0px);">补货</a><a class="mui-btn mui-btn-yellow" style="transform: translate(-90px, 0px);">查看原因</a><a class="mui-btn mui-btn-red" style="transform: translate(-180px, 0px);">解除状态</a></div><div class="mui-slider-handle" style="transform: translate(0px, 0px);"><div class="mui-table-cell">' + val.number + '</div></div></li>';
					
						if(val.isOnline == 0) {
							total++; 
							if(val.type == 1) {
								device1++;
								arr1.push(val.number);
								//jQuery('.arr1').append('<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">'+val.number+'</a></li>');
								//'<li class="mui-table-view-cell mui-transitioning"><div class="mui-slider-right mui-disabled"><a  href="#device' + val.number + '" class="mui-btn mui-btn-grey " style="transform: translate(0px, 0px);">详情</a><a class="mui-btn mui-btn-yellow" style="transform: translate(-90px, 0px);">操作</a><a class="mui-btn mui-btn-red" style="transform: translate(-180px, 0px);">删除</a></div><div class="mui-slider-handle" style="transform: translate(0px, 0px);"><div class="mui-table-cell">' + val.number + '</div></div></li><div id="device' + val.number + '" class="mui-popover"><ul class="mui-table-view"><li class="mui-table-view-cell">设备号：<span class="mui-badge">' + val.number + '</span></li><li class="mui-table-view-cell">设备类型：<span class="mui-badge">' + type + '</span></li><li class="mui-table-view-cell">设备状态：<span class="mui-badge">' + state + '</span></li><li class="mui-table-view-cell">设备位置：<span class="mui-badge">' + city + '</span></li><li class="mui-table-view-cell">经纬度：<span class="mui-badge">' + val.longitude + ',' + val.latitade + '</span></li></ul></div>'
								jQuery('.arr1').append(html);
							} else if(val.type == 2) {
								device2++;
								arr2.push(val.number);
								jQuery('.arr2').append(html);
							} else if(val.type == 3) {
								device3++;
								arr3.push(val.number);
								jQuery('.arr3').append(html);
							}
						}
					
				});

				jQuery('.total').html(total);
				jQuery('.device1').html(device1);
				jQuery('.device2').html(device2);
				jQuery('.device3').html(device3);

				jQuery('.mui-btn-grey').on('click', function(e) {
					console.log(jQuery(this).parents("ul").siblings("a").html())
					mui.openWindow({
						url: '../view.html',
						show: {
							autoShow: false
						},
						extras: {
							data: jQuery(this).parent("div").siblings(".mui-slider-handle").find("div").html(),
							type: jQuery(this).parents("ul").siblings("a").html()
						}
					});
				});
				jQuery('.mui-btn-yellow').on('click', function(e) {
					alert("查看原因")
				});

				jQuery('.mui-btn-red').on('click', function(e) {
					alert("解除离线")
				});
				
					var mask = mui.createMask(); //遮罩层
				jQuery('li ul li').on('click', function(e) {
					if(jQuery(this).hasClass("mui-selected")){
						jQuery(this).removeClass("mui-selected");
						jQuery(this).find("div").eq(0).removeClass("mui-selected");
						jQuery(this).find("div").eq(0).find("a").eq(0).css("transform","translate(0px, 0px)");
						jQuery(this).find("div").eq(0).find("a").eq(1).css("transform","translate(-90px, 0px)");
						jQuery(this).find("div").eq(0).find("a").eq(2).css("transform","translate(-180px, 0px)");
						jQuery(this).find("div").eq(1).css("transform","translate(0px, 0px)");
					}else{
						jQuery(this).addClass("mui-selected")
						jQuery(this).find("div").eq(0).addClass("mui-selected");
						jQuery(this).find("div").eq(0).children("a").css("transform","translate(-310px, 0px)");
						jQuery(this).find("div").eq(1).css("transform","translate(-310px, 0px)");
						
					}
				})
				
				
			});
		</script>
	</body>

</html>